<template>
    <bs-dialog class="choice-template" :title="$t('终端布局')" :visible.sync="editor" size="small" @closed="doCloseEdit" @opened="doLoadScreen">
        <template slot="main">
            <div v-if="editor">
                <layout-template :deviceName="deviceName" :deviceIds="deviceIds" :width="width" :height="height" :screen-data="screenData" :device-widget-data="deviceWidgetData" @save="doSave"></layout-template>
            </div>
        </template>
    </bs-dialog>
</template>

<script>
import LayoutTemplate from './LayoutTemplate'
import ScreenApi from '@/api/screen'

export default {
    name:'DeviceLayoutDialog',
    data() {
        return {
            editor: false,
            deviceData: null,
            screenData: [],
            deviceWidgetData: [],
            deviceName: '',
            width: 4000,
            height: 4000,
            deviceIds: [],
            queryData: {}
        }
    },
    components: {
        LayoutTemplate
    },
    created() {
        this.$eventBus.$on('showDeviceLayoutDialog', this.show)
    },
    beforeDestroy() {
        this.$eventBus.$off('showDeviceLayoutDialog')
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    methods: {
        show(data, queryData) {
            this.queryData = queryData
            if(data instanceof Array) {
                data.forEach(item => {
                    this.deviceIds.push(item.id)
                })
                this.deviceName = ''
                this.width = 4000
                this.height = 4000
            } else {
                this.deviceIds.push(data.id)
                this.deviceName = data.name
                this.width = data.width
                this.height = data.height
            }
            this.deviceData = data
            this.editor = true;
        },
        // 关闭
        doCloseEdit: function () {
            this.deviceWidgetData = []
            this.deviceIds = []
            this.screenData = []
            this.editor = false
        },
        //保存
        async doSave(saveData) {
            const res = await ScreenApi.editDeviceLayout({
                ...saveData,
                ...this.queryData
            })
            this.editor = false
            this.$eventBus.$emit('doList', { current: 1 })
            // this.editor = false
        },
        // 加载屏幕
        async doLoadScreen() {
            try{
                if(! (this.deviceData instanceof Array) && !this.queryData.allSize) {
                    const twres = await ScreenApi.loadDeviceLayout({terminalId: this.deviceData.id})
                    if(twres) {
                        this.deviceWidgetData = twres.argus
                    } else {
                        this.deviceWidgetData = []
                    }
                }
            }catch(error){this.deviceWidgetData = []}
            try{
                // const res = await ScreenApi.queryAllList()
                // if(res) {
                //     this.screenData = res
                // }
            }catch(error){console.log(error)}
        }
    }
}
</script>

<style lang="scss" scoped>
.choice-template {
    ::v-deep .el-dialog__body {
        padding: 0 !important;
    }
    ::v-deep .el-dialog {
        height: 720px;
    }
    ::v-deep .el-dialog__footer {
        padding: 0px !important;
        border-top: 0px !important;
    }
}
</style>
